<template>

	<view class="content">
		<view class="boxs">
			<view class="seconds">
				<view class="" style="padding: 20rpx;background-color: #ffffff;border-radius: 10rpx;">
					<view class="" style="font-size: 28rpx;margin-top: 10rpx;margin-left: 12rpx;">
						话费充值
					</view>
					<view class="phone">
						<input type="number" v-model="mobile" maxlength="11"
							style="font-size: 50rpx;font-weight: bold;height: 80rpx;" placeholder="请输入电话号码"></input>
						<u-line color="#535353"></u-line>
					</view>
					<view class="colu">
						<view v-for="(item,index) in money" :key="index"
							style="width: 32%;border-radius: 11rpx;background-color: #f4f7fe;margin-top: 30rpx;height: 120rpx;"
							@click="check(item)"
							:class="item.check==true ? 'd_f j_c_c a_i_c f_c_c checks' : 'd_f j_c_c a_i_c f_c_c'">
							<image src="../../static/right.png" mode="widthFix"
								style="width:80rpx;position: absolute;margin-left: 124rpx;margin-top: -70rpx;"
								v-if="item.check==true"></image>
							<view class="" v-if="item.new!=''" style="position: absolute;">
								<!-- <image src="../../static/right.png" mode="widthFix" style="width:80rpx;position: absolute;margin-left: 88rpx;margin-top: -14rpx;"></image> -->
								<view class="t_a_c" style="color: #3578FD;font-size: 40rpx;" v-if="item.check==true">
									{{item.old}}元
								</view>
								<view class="t_a_c" style="color: #666666;font-size: 40rpx;" v-else>
									{{item.old}}元
								</view>
								<view class="" style="height: 10rpx;">

								</view>
								<view class="t_a_c" style="">
									<text style="color:#333333 ;">售价：</text> <text
										style="color: #FF0D0D;">{{item.new}}</text><text style="color:#333333 ;">元
									</text>
								</view>
							</view>
							<view class=""
								style="text-align: center;line-height: 120rpx;position: absolute;color:#333333" v-else>
								更多面额
							</view>
							<!-- #ifdef  MP-ALIPAY  -->

							<button v-if="mobile==''&&time==0" class="login" type="default" open-type="getAuthorize"
								@getAuthorize="onGetAuthorize" @error="onAuthError" scope='phoneNumber'
								style="width: 100%;height: 100%;z-index: 2;opacity: 0;"></button>

							<view class="" v-else>

							</view>
							<!-- #endif -->

						</view>

					</view>

				</view>

			</view>


		</view>


		<view class="" style="z-index: 999;">
			<view class="" style="width: 100%;height: 100rpx;position: fixed;bottom: 0;right: 0;">
				<alls onRenderFail='onRenderFail' onAdErrors='onAdErrors' onRenderSuccess='onRenderSuccess'></alls>
			</view>
			<view class="d_f" style="position: fixed;width: 50%;bottom: 0;right: 0;" @click="changex"
				v-if="flagp==false">
				<view class="d_f j_c_c a_i_c f_c_c" style="width: 100%;height: 100rpx;background: red;color: #ffffff;">
					立减5元
				</view>


			</view>
			<view class="d_f" style="position: fixed;width: 50%;bottom: 0;left: 0;" @click="change">
				<view class="d_f j_c_c a_i_c f_c_c"
					style="width: 100%;height: 100rpx;background: #1677FE;color: #ffffff;">
					原价充值
				</view>

			</view>
		</view>



	</view>
</template>

<script>
	let pluginIns;
	import {
		getdata,
		addLog,
		getUrl,
		addNum,
		statusx,
		getcode,
		logs,
		openSignDecrypt
	} from '../../api/index.js'
	export default {
		data() {
			return {
				time: 0,
				flagp: true,
				showi: true,
				ad: null,
				mobile: '',
				showx: false,
				flag: true,
				flags: '',
				shows: false,
				money: [{
						old: 5,
						new: '0',
						check: false,
						id: '1'
					}, {
						old: 30,
						new: 25,
						check: false,
						id: '2'
					},
					{
						old: 50,
						new: 45,
						check: false,
						id: '3'
					},
					{
						old: 100,
						new: 95,
						check: false,
						id: '4'
					},

					{
						old: 200,
						new: 195,
						check: false,
						id: '5'
					},

					{
						old: "",
						new: "",
						check: false,
						id: '6'
					}
				],
			}
		},

		onLoad(option) {

			this.$scope.onRenderSuccess = this.onRenderSuccess.bind(this)
			this.mobile = option.mobile
			this.$scope.onAdInstance = this.onAdInstance.bind(this)
			this.$scope.onAdLoad = this.onAdLoad.bind(this)
			this.$scope.onAdError = this.onAdError.bind(this)
			this.$scope.onRenderFail = this.onRenderFail.bind(this)
			this.$scope.onSuccess = this.onSuccess.bind(this)
			this.$scope.onClose = this.onClose.bind(this)
			this.$scope.onAdErrors = this.onAdErrors.bind(this)

			if (option.mobile) {
				my.setStorageSync({
					key: 'phone',
					data: option.mobile
				})

			}
			if (option.a) {
				my.setStorageSync({
					key: 'a',
					data: option.a
				})

			}

			if (option.param) {
				my.setStorageSync({
					key: 'param',
					data: option.param
				})

			}



		},
		onShow() {
			setTimeout(function(){
		logs({
			a: my.getStorageSync({
				key: 'a'
			}).data,
			eventType: 4,
			xcx: 2,
			spaceCode: "50_2023111525000070727",
			pages:"pages/newbanner/newbanner",
			orderNo: my.getStorageSync({
				key: 'orderNo'
			}).data,
			deviceid:my.getStorageSync({
				key: 'deviceid'
			}).data
		}).then((res) => {
			console.log(res)
		})
				}, 1000);
	
		},
		methods: {
			onAuthError(err) {
				console.log(err)
				this.time = 1
			},
			onGetAuthorize() {
				uni.showLoading({
					title: "授权中",
					mask: true
				})
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						console.log(encryptedData)
						openSignDecrypt({
							encryptedData: JSON.parse(encryptedData).response
						}).then((resx) => {
							console.log(resx)
							uni.hideLoading()
							this.time = 1
							uni.setStorageSync('mobile', resx.data.mobile)
							uni.setStorageSync('openid', resx.data.openid)
							this.mobile = resx.data.mobile
							this.openid = resx.data.openid
						})

					},
					fail: (res) => {
						console.log(res);
						uni.hideLoading()
						console.log('getPhoneNumber_fail');
					},
				});


			},
			changex() {
				uni.navigateTo({
					url: '/pages/unit/unit'
				})
			},
			onRenderSuccess() {
				logs({
					a: my.getStorageSync({
						key: 'a'
					}).data,
					eventType: 3,
					xcx: 2,
					spaceCode: "50_2023111525000070727",
					deviceid:my.getStorageSync({
						key: 'deviceid'
					}).data
				}).then((res) => {
					console.log(res)
				})
			},
			check(e) {

				for (var i in this.money) {
					if (this.money[i].id == e.id) {
						this.money[i].check = !this.money[i].check
					} else {
						this.money[i].check = false
					}
				}
				// console.log(this.money)

			},
			change() {
				let link = "https://render.alipay.com/p/s/i/?scheme=" + encodeURIComponent(
					"alipayqr://platformapi/startapp?saId=10000003")

				my.ap.navigateToAlipayPage({
					path: link
				})
			},

			onAdInstance: (ins) => {
				console.log(ins, "onAdInstance")
				pluginIns = ins

			},
			//banner报错
			onRenderFail(err) {
				console.log(err, 666666)
				uni.hideLoading()
				this.flagp = false
			},
			onAdErrors() {


			},
			//勾选成功
			onSuccess() {
				console.log("加载成功", this.flag)
				this.flag = false
				logs({
					a: my.getStorageSync({
						key: 'a'
					}).data,
					eventType: 3,
					xcx: 2,
					deviceid:my.getStorageSync({
						key: 'deviceid'
					}).data
				}).then((res) => {
					console.log(res)
				})
				this.showi = true
				uni.hideLoading()
			},
			//勾选报错
			onAdError(err) {
				console.log('加载失败')
				this.flag = true
				this.showi = false


			},
			onClose() {
				this.flag = false
				this.showi = false
			},

			onAdLoad() {

				if (pluginIns) {
					console.log('show')
					pluginIns.show({
						spaceCode: '50_2023110725000069504',
						rtaExtMap: {
							param: '',
							mobile: this.mobile,
							orderNo: my.getStorageSync({
								key: 'orderNo'
							}).data,
							a: my.getStorageSync({
								key: 'a'
							}).data,
							organization_type: 'hospital',
							organization_sub_type: 'general_hospital',
							device_location: 'outpatient_department',
							device_id: '111111',
							public_opinion_level: 'low_risk',
							touch_point_location: 'index',
							touch_point_type: 'full_screen',

						},
					});
				}

				setTimeout(() => {
					this.flags = true

					uni.hideLoading()
				}, 700);
				setTimeout(() => {
					this.shows = true
					uni.hideLoading()
				}, 400);



			}
		}
	}
</script>
<style scoped lang='scss'>
	.seconds {
		width: 688rpx;

		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		padding: 0 10rpx 20rpx 10rpx;
	}

	.boxs {
		background-image: url('../../static/bax.png');
		background-size: 100% 100%;
		padding: 20rpx 0 0 0;
	}

	.content {
		height: 100%;
		overflow-y: hidden;

	}

	.colu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.phone {

		font-size: 50rpx;
		margin-top: 10rpx;
		font-weight: 500;
		color: #000000;
	}

	.checks {
		border: 1px solid #2881FD;

		background-color: #EEFEFB !important;
	}
</style>